<template>
  <div class="drawer">
    <el-drawer
      size="36%"
      class="drawer_three"
      :append-to-body="true"
      :visible="show"
      :show-close="false"
      :before-close="handleClose"
    >
      <!-- <template slot="title"><i @click="handleLast" class="el-icon-arrow-left" style="font-size: 14px; color: #000; cursor: pointer">返回主页</i></template> -->
      <div class="three_content">
        <div class="three_icon">
          <img :src="src" alt="" />
          <p class="title">{{ title }}</p>
        </div>
        <!-- 表单 -->
        <div class="form">
          <el-form
            label-width="150px"
            ref="form"
            :model="formData"
            :rules="rules"
          >
            <el-form-item label="店主身份证" prop="imgRequest.idCardOne">
              <el-row class="idFront">
                <img
                  :src="
                    formData.imgRequest.idCardOne
                      ? formData.imgRequest.idCardOne
                      : require('./images/身份证正面.png')
                  "
                  alt=""
                />
                <el-upload
                  v-model="formData.imgRequest.idCardOne"
                  :action="uploadFileUrl"
                  list-type="picture"
                  :show-file-list="false"
                  :on-success="handleSuccessF"
                  :on-remove="handleRemoveF"
                >
                  <div class="fRight">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <el-button type="primary" class="btn" @click="handleUpF">点击上传</el-button> -->
                    <p>请上传正面影像</p>
                  </div>
                </el-upload>
              </el-row>
              <el-row class="idFront">
                <img
                  :src="
                    formData.imgRequest.idCardTwo
                      ? formData.imgRequest.idCardTwo
                      : require('./images/身份证正面.png')
                  "
                  alt=""
                />
                <el-upload
                  v-model="formData.imgRequest.idCardTwo"
                  :action="uploadFileUrl"
                  list-type="picture"
                  :show-file-list="false"
                  :on-success="handleSuccessB"
                  :on-remove="handleRemoveB"
                >
                  <div class="fRight">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <el-button type="primary" class="btn" @click="handleUpF">点击上传</el-button> -->
                    <p>请上传反面影像</p>
                  </div>
                </el-upload>
              </el-row>
            </el-form-item>
            <!--  -->
            <el-form-item
              label-width="150px"
              label="法人手持身份证"
              prop="imgRequest.idCardThr"
            >
              <el-row class="idFront">
                <img
                  :src="
                    formData.imgRequest.idCardThr
                      ? formData.imgRequest.idCardThr
                      : require('./images/身份证正面.png')
                  "
                  alt=""
                />
                <el-upload
                  v-model="formData.imgRequest.idCardThr"
                  :action="uploadFileUrl"
                  list-type="picture"
                  :show-file-list="false"
                  :on-success="handleSuccessH"
                  :on-remove="handleRemoveH"
                >
                  <div class="fRight">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <el-button type="primary" class="btn" @click="handleUpF">点击上传</el-button> -->
                    <p>请上传正面影像</p>
                  </div>
                </el-upload>
              </el-row>
            </el-form-item>
            <el-form-item
              label-width="150px"
              label="银行开户证明"
              prop="imgRequest.bankImg"
            >
              <el-row class="idFront">
                <img
                  :src="
                    formData.imgRequest.bankImg
                      ? formData.imgRequest.bankImg
                      : require('./images/身份证正面.png')
                  "
                />
                <el-upload
                  v-model="formData.imgRequest.bankImg"
                  :action="uploadFileUrl"
                  list-type="picture"
                  :show-file-list="false"
                  :on-success="handleSuccessA"
                  :on-remove="handleRemoveA"
                >
                  <div class="fRight">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <el-button type="primary" class="btn" @click="handleUpF">点击上传</el-button> -->
                    <p>请上传开户证明</p>
                  </div>
                </el-upload>
              </el-row>
            </el-form-item>
            <el-form-item
              v-show="data.mallInfoRequest.type === 2"
              label-width="150px"
              label="营业执照"
              prop="imgRequest.businessLicense"
            >
              <el-row class="idFront">
                <img
                  :src="
                    formData.imgRequest.businessLicense
                      ? formData.imgRequest.businessLicense
                      : require('./images/营业执照.png')
                  "
                />
                <el-upload
                  v-model="formData.imgRequest.businessLicense"
                  :action="uploadFileUrl"
                  list-type="picture"
                  :show-file-list="false"
                  :on-success="handleSuccessL"
                  :on-remove="handleRemoveL"
                >
                  <div class="fRight">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <el-button type="primary" class="btn" @click="handleUpF">点击上传</el-button> -->
                    <p>请上传营业执照</p>
                  </div>
                </el-upload>
              </el-row>
            </el-form-item>
            <el-form-item
              v-show="data.mallInfoRequest.type === 2"
              label-width="150px"
              label="税务登记证"
              prop="imgRequest.taxRegistration"
            >
              <el-row class="idFront">
                <img
                  :src="
                    formData.imgRequest.taxRegistration
                      ? formData.imgRequest.taxRegistration
                      : require('./images/营业执照.png')
                  "
                />
                <el-upload
                  v-model="formData.imgRequest.taxRegistration"
                  :action="uploadFileUrl"
                  list-type="picture"
                  :show-file-list="false"
                  :on-success="handleSuccessS"
                  :on-remove="handleRemoveS"
                >
                  <div class="fRight">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <p>请上传务登记证</p>
                  </div>
                </el-upload>
              </el-row>
            </el-form-item>
            <el-form-item label-width="150px" label="验证码" prop="code">
              <el-row class="idFront">
                <el-input
                  style="width: 133px; height: 40px"
                  v-model="formData.code"
                  placeholder="请输入验证码"
                ></el-input>
                <canvas
                  @click="getcode"
                  style="
                    width: 93px;
                    height: 36px;
                    margin-left: 17px;
                    border: 1px solid #e9e9e9;
                    padding: 0;
                  "
                  ref="canvas"
                ></canvas>
              </el-row>
            </el-form-item>
            <!-- 我已接受 -->
            <el-form-item label-width="-150px" prop="accept">
              <el-checkbox v-model="accept"></el-checkbox>
              <span style="font-size: 12px; color: #9f9f9f; margin-left: 10px"
              >我已同意并接受</span
              >
              <span style="color: #1289ff; font-size: 12px">《店铺协议》</span>
            </el-form-item>

            <!-- 操作按钮 -->
            <el-form-item label-width="10px">
              <el-button class="el_btn" @click="handleLast">上一步</el-button>
              <el-button class="el_btn" @click="handleNext">立即入驻</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { cloud } from '@/framework/utils/request'
import { getCode, openMall } from '@/framework/api/user'

export default {
  /* 注册组件 */
  components: {},
  /* 接受父组件传过来的数据 */
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => {}
    }
  },

  /* 数据 */
  data() {
    return {
      dialogVisible: false,
      imageUrl: '',
      fileList: [],
      uploadFileUrl: `${
        process.env.VUE_APP_BASE_API + cloud.file
      }/sysFileInfo/upload?secretFlag=N&fileBucket=mall`,
      view: false,
      // 我已接受
      accept: false,
      formData: {
        code: '',
        imgRequest: {
          idCardOne: '',
          idCardTwo: '',
          idCardThr: '',
          bankImg: '',
          businessLicense: '',
          taxRegistration: ''
        }
      },
      rules: {
        imgRequest: {
          idCardOne: [
            {
              required: true,
              message: '请上传店主身份证正面',
              trigger: 'blur'
            }
          ],
          idCardTwo: [
            {
              required: true,
              message: '请上传店主身份证反面',
              trigger: 'blur'
            }
          ],
          idCardThr: [
            {
              required: true,
              message: '请上传法人手持身份证',
              trigger: 'blur'
            }
          ],
          bankImg: [
            { required: true, message: '请上传银行开户证明', trigger: 'blur' }
          ],
          businessLicense: [
            { required: true, message: '请上传营业执照', trigger: 'blur' }
          ],
          taxRegistration: [
            { required: true, message: '请上传税务登记证', trigger: 'blur' }
          ],
          code: [
            {
              required: true,
              message: '请勾选我已同意并接受',
              trigger: 'blur'
            }
          ]
        }
      },
      CODE: 0
    }
  },

  /* 计算属性 */
  computed: {},

  /* 监听器 */
  watch: {
    // 监听 show
    show(val) {
      if (val) {
        this.getcode()
      }
    }
  },

  /* 初始化阶段 */
  created() {},

  /* 方法 */
  methods: {
    handleClose(done) {
      done()
    },
    // 上传店主正面
    handleSuccessF(res, file) {
      this.formData.imgRequest.idCardOne = file.response.data.fileUrl
    },
    // 上传店主正面
    handleSuccessB(res, file) {
      this.formData.imgRequest.idCardTwo = file.response.data.fileUrl
    },
    // 手持身份证
    handleSuccessH(res, file) {
      console.log('file: ', file.response.data.fileUrl)
      this.formData.imgRequest.idCardThr = file.response.data.fileUrl
    },
    // 开户
    handleSuccessA(res, file) {
      this.formData.imgRequest.bankImg = file.response.data.fileUrl
    },
    // 营业执照
    handleSuccessL(res, file) {
      this.formData.imgRequest.businessLicense = file.response.data.fileUrl
    },
    // 税务登记证
    handleSuccessS(res, file) {
      this.formData.imgRequest.taxRegistration = file.response.data.fileUrl
    },
    handleRemoveF() {
      this.formData.imgRequest.idCardOne = ''
    },
    handleRemoveB() {
      this.formData.imgRequest.idCardTwo = ''
    },
    handleRemoveH() {
      this.formData.imgRequest.idCardThr = ''
    },
    handleRemoveA() {
      this.formData.imgRequest.bankImg = ''
    },
    handleRemoveL() {
      this.formData.imgRequest.businessLicense = ''
    },
    handleRemoveS() {
      this.formData.imgRequest.taxRegistration = ''
    },
    // 上一步
    handleLast() {
      this.$emit('handleLast')
    },
    getcode() {
      getCode().then((res) => {
        if (res.code === '00000') {
          console.log(res)
          this.CODE = res.message
          this.drawPic(this.CODE)
        }
      })
    },
    // 立即入驻
    handleNext() {
      if (this.data.mallInfoRequest.type === 1) {
        // 删除营业执照和税务登记证
        delete this.rules.imgRequest.businessLicense
        delete this.rules.imgRequest.taxRegistration
      }
      this.formData = { ...this.data, ...this.formData }
      // 表单验证
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        // => 提交表单
        openMall(this.formData).then((res) => {
          if (res.code === '00000') {
            console.log(res)
            // 跳转到/mall/stroeInfo
            this.$router.push({
              path: '/mall/stroeInfo',
              query: { mallCode: res.message }
            })
            // 提示提交成功
            this.$message.success('提交成功')
          }
        })
      })
    },
    // 生成随机色
    getRandomColor() {
      return `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
    },
    // 根据传过来的汉字绘制验证码图片
    drawPic(num) {
      // eslint-disable-next-line prefer-destructuring
      const canvas = this.$refs['canvas']
      const ctx = canvas.getContext('2d')
      // 区域大小93 宽度 36 长度
      canvas.width = 93
      canvas.height = 36
      // 绘制背景
      ctx.fillStyle = '#ffffff'
      ctx.fillRect(0, 0, 93, 36)
      // 绘制文字
      ctx.font = '30px Microsoft YaHei'
      ctx.fillStyle = this.getRandomColor()
      ctx.fillText(num, 10, 25)
      // 绘制各种的干扰线
      for (let i = 0; i < 4; i++) {
        ctx.strokeStyle = this.getRandomColor()
        ctx.beginPath()
        ctx.moveTo(
          Math.floor(Math.random() * 93),
          Math.floor(Math.random() * 36)
        )
        ctx.lineTo(
          Math.floor(Math.random() * 93),
          Math.floor(Math.random() * 36)
        )
        ctx.stroke()
      }
      // 绘制干扰点
      for (let i = 0; i < 100; i++) {
        ctx.fillStyle = this.getRandomColor()
        ctx.beginPath()
        ctx.arc(
          Math.floor(Math.random() * 93),
          Math.floor(Math.random() * 36),
          1,
          0,
          2 * Math.PI
        )
        ctx.fill()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.drawer_three {
  .three_content {
    text-align: center;

    .three_icon {
      margin-top: 15px;
    }

    p {
      font-family: "Source Han Sans CN Bold";
      font-weight: 700;
      font-size: 28px;
      color: #000;
    }
  }

  .form {
    margin: 0 auto;
    width: 495px;
    margin-top: 57px;

    ::v-deep .el-checkbox {
      // 选框
      .el-checkbox__inner {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        // 中间的 “✔” 的位置调整
        &::after {
          left: 5px;
          top: 2px;
        }
      }
    }

    .el_btn {
      width: 130px;
      height: 45px;
      border-radius: 22.5px;
      background: #1289ff;
      font-weight: 400;
      font-size: 20px;
      color: #fff;
    }

    .idFront {
      display: flex;

      img {
        width: 134px;
        height: 92px;
        background: transparent;
      }

      .btn {
        width: 83px;
        height: 30px;
        margin: 0;
        padding: 0;
        border-radius: 15px;
        background: #1289ff;
        font-size: 14px;
        color: #fff;
      }

      .fRight {
        margin-left: 16px;

        p {
          width: 84px;
          font-family: "Microsoft YaHei";
          font-weight: 400;
          font-size: 12px;
          text-align: left;
          color: #626262;
          margin-top: 22px;
        }
      }
    }

    .idFrontUp {
      width: 134px;
      height: 92px;
      background: transparent;
    }
  }
}
</style>
